<template>
  <div class="hh-dict-text">
    <div v-if="initloading" class="hh-dict-text-loading">
      <el-icon class="is-loading"><el-icon-loading /></el-icon>
    </div>
    {{ showText }}
  </div>
</template>

<script>
export default {
  props: {
    apiObj: { type: Object, default: () => {} }, //获取接口
    params: { type: String, default: "" }, //参数的值
    name: { type: String, default: "name" }, //用于显示的字段
    paramsName: { type: String, default: "id" }, //参数的字段名
  },
  data() {
    return {
      showText: "",
      initloading: false,
    };
  },
  watch: {
    dictCode() {
      this.initloading = true;
      this.getRemoteData();
    },
  },
  created() {
    this.initloading = true;
    this.getRemoteData();
  },
  methods: {
    async getRemoteData() {
      //获取数据
      this.initloading = true;
      let params = {};
      params[this.paramsName] = this.params;
      let res = await this.apiObj.get(params);
      if (res.code == 0) {
        this.showText = res.data[this.name];
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(this.$TOOL.json.get("", errdata, "message"), this.$TOOL.json.get("", errdata, "title"), {
          type: "error",
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
          showCancelButton: false,
        });
      }
      this.initloading = false;
    },
  },
};
</script>

<style scoped>
.hh-dict-text {
  display: inline-block;
  position: relative;
}
.hh-dict-text-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 100;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.hh-dict-text-loading i {
  font-size: 14px;
}

[data-theme="dark"] .hh-dict-text-loading {
  background: var(--el-color-white);
  border-color: var(--el-border-color-base);
}
</style>
